<template>
  <el-card shadow="never" class="portal-eChart-box">
    <div slot="header" class="portal-common-title">
      <span >{{ title }}{{ subTitle }}</span>
      <div style="
position: absolute;
    top: 13px;
    z-index: 10000;
    right: 5px;
    display: flex
;
    width: 60%;">
        <el-row  :gutter="15">
          <el-col :span="6">
            <el-select v-model="query.brand" placeholder="选择品牌" @change="handleChangeData">
              <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions"  />
            </el-select>
          </el-col>
          <el-col :span="6">
            <custom-address v-model="query.province"  :level='1'  placeholder="选择省份"  @change="handleChangeData"/>
          </el-col>
          <el-col :span="6">
            <el-select v-model="query.year" placeholder="请选择" @change="handleChangeData">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="text" class='span-title' :loading='btn_loading' @click="handleChangeExport">导出</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="eChart-box-body">
      <div class='renewal-chart'>
<!--        v-show="!isEmpty"-->
        <div ref="renewalChart" id="chart"  class="dom-canvas" ></div>
        <div class="dom-details" >
          <div class="dom-details-item">
            <img src="@/assets/images/home/img1.png">
            <div>
              <span>已续费校区</span>
              <span>{{consultNum}}</span>
            </div>
          </div>
          <div class="dom-details-item">

            <img src="@/assets/images/home/img1.png">
            <div>
              <span>未续费校区</span>
              <span>{{enrollNum}}</span>
            </div>
          </div>
          <div class="dom-details-item">
            <img src="@/assets/images/home/img2.png">
            <div>
              <span>校区续费率</span>
              <span>{{consultRate}}%</span>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>-->
    </div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
import { getRenewal, getRenewalExport } from '@/api/home'
import moment from 'moment'

export default {
  mixins: [resize],
  props: {
    title: { type: String, default: '' },
    option: { type: Object, default: () => {} },
    propsApi: '',
    subTitle: ''
  },
  data() {
    return {
      chart: null,
      currOption: {},
      isEmpty: true,
      activeName: 'regionChart',
      consultNum: 0,//续费校区
      enrollNum: 0,//未续费
      consultRate: 0,//转换率（已为百分比）
      options: [
        {
          value:  moment().subtract(1, 'year').year(),
          label:  moment().subtract(1, 'year').year()
        },
        {
          value:  moment().year(),
          label:  moment().year()
        },
        {
          value: moment().add(1, 'year').year(),
          label: moment().add(1, 'year').year()
        }
      ],
      query: {
        year: moment().year(),
        brand: undefined,
        province: undefined
      },
      brandOptions: [],
      btn_loading: false
    }
  },
  created() {
    this.getData()
    this.getBrandOptions()
  },
  methods: {
    getBrandOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'Brand' }).then(res => {
        this.brandOptions = res
      })
    },
    handleChangeData() {
      this.getData()
    },
    handleChangeExport () {
      this.btn_loading = true
      try {
        getRenewalExport('report/renewal/province/export', this.query).then(res => {
          this.btn_loading = false
        })
      } catch (e) {
        this.btn_loading = false
      }

    },
    timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done')
      })
    },
    getData() {
      getRenewal(this.propsApi, this.query).then(res => {
        if (!res.data) {
          this.isEmpty = true
        }
        this.consultNum = res.data.alreadyRenewedCount
        this.enrollNum = res.data.shouldRenewCount
        this.consultRate = res.data.renewalRate
        this.currOption = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'horizontal',
            bottom: '5%',
            data: ['已续费校区', '未续费校区'] // 明确图例显示项
          },
          series: [{
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['50%', '40%'],
            data: [
              {
                value: res.data.alreadyRenewedCount,
                name: '已续费校区',
                itemStyle: { color: '#1aacfd' } // 单独指定颜色
              },
              {
                value: res.data.shouldRenewCount,
                name: '未续费校区',
                itemStyle: { color: '#71eae0' }
              }
            ],
            hoverAnimation: false,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
              },
            label: {
              show: false,
              position: 'outside',
              formatter: '{b}: {c} ({d}%)' // 明确单位
            }
          }]
        }
        this.resetChart()
      })
    },
    initChart() {
      let ref = this.$refs.renewalChart
      
      if (!ref) {
        console.warn('Chart container element not found')
        return
      }

      console.log(this.currOption, 'currOption')

      this.chart = echarts.init(ref)
      console.log(this.chart, 'chart')
      this.chart.setOption(this.currOption)
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      }, 50)
    },
    resetChart() {
      this.isEmpty = JSON.stringify(this.currOption) === '{}'
      this.chart && this.chart.dispose()
      this.chart = null
      if (!this.isEmpty) this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) return
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style lang="scss">
.portal-common-title{
  .span-title{
    span{
      border-left: 0;
    }
  }
}
.eChart-box-body {
  .el-input {
    input {
      border-radius: 20px;
    }
  }
  .renewal-chart{
    display: flex;
    flex: 1;
    height: 100%;
    .dom-canvas{
      flex: 1;
      width: 100%;
      div:nth-child(1){
        width: 100%;
      }
    }
    .dom-details{
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 30px;
      .dom-details-item{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 47px;
          height: 47px;
        }
        div{
          margin-left: 3px;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          width: 100px;

          span{
            display: block;
            font-size: 14px;
            &:nth-child(1) {
              color: #3c3938;
            }
            &:nth-child(2) {
              color: #1a92ff;
            }
          }

        }
      }
    }
    .portal-common-noData-eChart{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
